
@for $i from 0 through 100 {
  .w-#{$i}p {
    width: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .w-#{$i} {
    width: $i + px !important;
  }
}
@for $i from 0 through 300 {
  .h-#{$i} {
    height: $i + px !important;
  }
}
@for $i from 0 through 100 {
  .h-#{$i}p {
    height: $i * 1%!important;
  }
}
@for $i from 0 through 400 {
  .pad-#{$i} {
    padding: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .pad-t-#{$i} {
    padding-top: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .pad-b-#{$i} {
    padding-bottom: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .pad-l-#{$i} {
    padding-left: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .pad-r-#{$i} {
    padding-right: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .pad-tb-#{$i} {
    padding-top: $i + 0px!important;
    padding-bottom: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .pad-lr-#{$i} {
    padding-left: $i + px!important;
    padding-right: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-#{$i} {
    margin: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-t-#{$i} {
    margin-top: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-b-#{$i} {
    margin-bottom: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-l-#{$i} {
    margin-left: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-r-#{$i} {
    margin-right: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-tb-#{$i} {
    margin-top: $i + px!important;
    margin-bottom: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-lr-#{$i} {
    margin-left: $i + px!important;
    margin-right: $i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-#{$i}f {
    margin: -$i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-t-#{$i}f {
    margin-top: -$i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-b-#{$i}f {
    margin-bottom: -$i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-l-#{$i}f {
    margin-left: -$i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-r-#{$i}f {
    margin-right: -$i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-tb-#{$i}f {
    margin-top: -$i + px!important;
    margin-bottom: -$i + px!important;
  }
}
@for $i from 0 through 400 {
  .mar-lr-#{$i}f {
    margin-left: -$i + px!important;
    margin-right: -$i + px!important;
  }
}


@for $i from 0 through 300 {
  .pad-#{$i}p {
    padding: $i * 1% !important;
  }
}
@for $i from 0 through 300 {
  .pad-t-#{$i}p {
    padding-top: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .pad-b-#{$i}p {
    padding-bottom: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .pad-l-#{$i}p {
    padding-left: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .pad-r-#{$i}p {
    padding-right: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .pad-tb-#{$i}p {
    padding-top: $i * 1%!important;
    padding-bottom: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .pad-lr-#{$i}p {
    padding-left: $i * 1%!important;
    padding-right: $i * 1%!important;
  }
}

@for $i from 0 through 300 {
  .mar-#{$i}p {
    margin: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-t-#{$i}p {
    margin-top: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-b-#{$i}p {
    margin-bottom: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-l-#{$i}p {
    margin-left: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-r-#{$i}p {
    margin-right: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-tb-#{$i}p {
    margin-top: $i * 1%!important;
    margin-bottom: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-lr-#{$i}p {
    margin-left: $i * 1%!important;
    margin-right: $i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-#{$i}pf {
    margin: -$i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-t-#{$i}pf {
    margin-top: -$i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-b-#{$i}pf {
    margin-bottom: -$i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-l-#{$i}pf {
    margin-left: -$i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-r-#{$i}pf {
    margin-right: -$i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-tb-#{$i}pf {
    margin-top: -$i * 1%!important;
    margin-bottom: -$i * 1%!important;
  }
}
@for $i from 0 through 300 {
  .mar-lr-#{$i}pf {
    margin-left: -$i * 1%!important;
    margin-right: -$i * 1%!important;
  }
}